<template>
  <div id="kityminder" class="el-row--flex is-justify-center is-align-center">
    <!--     <a class="save" @click="save">保存</a>-->
    <img v-if="isUpdate === 1" src="@/assets/project/save.png" class="save" alt="" @click="save">
    <iframe class="iframe" :src="kityminder" frameborder="0" scrolling="auto"/>
  </div>
</template>
<script>
  // import kityminder from '@/components/local-kitymind-master/index.html'
  // const kityminder = require('@/components/local-kitymind-master/index.html')
  import { mindMapUpdate, mindMapGet } from '@/api/file'

  export default {
    name: 'Kityminder',
    components: {},
    props: {
      selectedFile: {
        type: Object,
        // 对象或数组默认值必须从一个工厂函数获取
        default: function() {
          return { suffix: '' }
        }
      },
      isUpdate: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        // kityminder: require('@/components/local-kitymind-master/index.html')
        // kityminder: 'http://vcdn.hejiahuan.cn/local-kitymind-master/index.html?1'
        kityminder: this.$relativePath + '/local-kitymind-master/index.html?1',
        iframe: null
      }
    },
    computed: {},
    created() {
    },
    mounted() {
      const that = this
      that.iframe = document.querySelector('iframe')
      that.iframe.onload = function() {
        that.mindMapGet()
      }
    },
    methods: {
      mindMapGet() {
        const id = this.selectedFile.id
        mindMapGet(id)
          .then(result => {
            const { data } = result
            if (data.mindMapJson && data.mindMapJson.length > 0) {
              this.importData(data.mindMapJson)
            }
            console.log(result)
          })
          .catch(err => {
            console.log(err)
          })
      },
      async save() {
        if (this.selectedFile.isUpdate === 0) {
          this.$message({
            message: '无修改权限',
            type: 'warning'
          })
          return false
        }
        const mindMapJson = await this.iframe.contentWindow.exportData('json')
        console.log(mindMapJson)
        const folderId = this.selectedFile.parentId
        const id = this.selectedFile.id
        const name = this.selectedFile.name
        mindMapUpdate(folderId, name, id, mindMapJson)
          .then(result => {
            console.log(result)
          })
          .catch(err => {
            console.log(err)
          })
      },
      importData(data) {
        this.iframe.contentWindow.importData('json', data)
      }
    }
  }
</script>
<style lang="scss" scoped>
  #kityminder {
    flex: 1;
    background-color: #fff;

    & > img {
      max-width: 100%;
      max-height: 100%;
    }

    .iframe {
      width: 100%;
      height: 100%;
    }

    .save {
      width: 15Px;
      color: #23527c;
      position: absolute;
      top: 10px;
      right: 50px;
      cursor: pointer;
    }
  }
</style>
